<template>
  <div class="builder-container">

    <Tabs size="small">
      <TabPane label="基本配置">
        <Form :label-width="105">
        <FormItem label="标签">
          <Input size="small" v-model="obj.title" placeholder=""/>
        </FormItem>
        <FormItem label="字段名称">
          <Input size="small" v-model="obj.field" placeholder=""/>
        </FormItem>
        <FormItem label="默认值">
          <Input size="small" v-model="obj.value" placeholder=""/>
        </FormItem>
        <FormItem label="输入框类型">
          <Select :transfer="true" size="small" v-model="obj.props.type">
            <Option v-for="item in types" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="组件尺寸">
          <Select :transfer="true" size="small" v-model="obj.props.size">
            <Option value="default">默认</Option>
            <Option value="small">小型</Option>
            <Option value="large">大型</Option>
          </Select>
        </FormItem>
        <FormItem label="显示清空按钮">
          <i-switch v-model="obj.props.clearable">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem label="是否禁用状态">
          <i-switch v-model="obj.props.disabled">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem label="是否只读状态">
          <i-switch v-model="obj.props.readonly">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem label="文本域默认行数">
          <InputNumber size="small" :max="1000" :min="1" v-model="obj.props.rows"></InputNumber>
          <p class="color-red">仅在输入框类型为多行文本下有效</p>
        </FormItem>
        <FormItem label="占位文本">
          <Input size="small" v-model="obj.props.placeholder" placeholder=""/>
        </FormItem>

        <FormItemPanel title="栅格布局配置">
          <FormItem label="栅格列数COL">
            <InputNumber size="small" :max="24" :min="1" v-model="obj.col.span"></InputNumber>
          </FormItem>
          <FormItem label="偏移数OFFSET">
            <InputNumber size="small" :max="24" :min="0" v-model="obj.col.offset"></InputNumber>
          </FormItem>
        </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="校验规则">
        <CValidatePanel v-model="obj"></CValidatePanel>
      </TabPane>
      <!--<TabPane label="事件监听"></TabPane>-->
    </Tabs>

  </div>
</template>

<script>
  import '../CustomForm.css'

  export default {
    name: 'CInputBuilder',
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value,
        types: [
          {label: '单行文本', value: 'text'},
          {label: '多行文本', value: 'textarea'},
          {label: '密码输入框', value: 'password'},
          {label: 'URL输入框', value: 'url'},
          {label: '邮箱输入框', value: 'email'}
        ]
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>

</style>
